<template>
  <div class="changeChildPipeColor">
    <el-form ref="form" :model="formData" label-width="100px">
      <el-form-item label="当前子管" v-if="nowPipeProperties">
        <el-input v-model="nowPipeProperties.properties.CODE" disabled size="mini"></el-input>
      </el-form-item>
      <el-form-item label="当前子管" v-else>
        <span>请选择一个子管</span>
      </el-form-item>
      <el-form-item label="选择颜色">
        <el-select v-model="formData.colorid" filterable size="mini" placeholder="请选择颜色">
          <el-option
            v-for="item in colorList"
            :key="item.C_SYS_COLOR_ID"
            :label="item.COLORNAME"
            :value="item.C_SYS_COLOR_ID">
            <div class="color-option">
              <span class="color-dot" :style="{background: getColorValue(item)}"></span>
              <span class="color-name">{{item.COLORNAME}}</span>
            </div>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm" size="mini">确认</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {get, find} from 'lodash';
import {sessionStorage} from '@/deps/utils';
import {updateChildPipeColorApi} from '@/deps/apis/pipeApi';
import {generalIntToRGB} from '@/widgets/mapUtils';
export default {
  name: 'changeChildPipeColor',
  props: {
    colorList: {
      type: Array,
      default: () => []
    },
    nowPipeProperties: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      formData: {
        colorid: null
      }
    };
  },
  methods: {
    getColorValue(color) {
      return generalIntToRGB(get(color, 'COLORVALUE', '#2d8cf0'));
    },
    submitForm() {
      if (!this.formData.colorid) {
        this.$message.warning('请选择颜色');
        return;
      }
      if (!this.nowPipeProperties) {
        this.$message.error('请选择子管');
        return;
      }
      const selectedColor = find(this.colorList, {C_SYS_COLOR_ID: this.formData.colorid});
      const params = {
        smid: get(this.nowPipeProperties, 'properties.SMID', ''),
        colorid: this.formData.colorid,
        userName: get(sessionStorage('userData'), 'userName', ''),
        colorvalue: get(selectedColor, 'COLORVALUE', '')
      };
      updateChildPipeColorApi(params).then(res => {
        this.$message.success('修改子管颜色成功');
        this.$emit('confirmChangeColor', res);
      }).catch(() => {
        this.$message.error('修改子管颜色失败');
      });
    }
  }
};
</script>
<style lang="scss">
.changeChildPipeColor {
  color: var(--text-color)
}
.color-option {
  display:flex;align-items:center;padding:5px;
  .color-dot {
    display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px;
  }
  .color-name {
    color:#606266;
  }
}
</style>